<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地3D模型生成器</title>
    <link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    
    
</head>
<body>
    <div class="container">
        <header>
            <h1>🎯 本地3D模型生成器</h1>
            <p>输入描述或上传图片，生成3D模型（完全本地运行）</p>
        </header>

        <div class="input-section">
            <div class="tab-buttons">
                <button class="tab-button active" data-tab="text-tab">📝 文本生成</button>
                <button class="tab-button" data-tab="image-tab">🖼️ 图片生成</button>
            </div>

            <div id="text-tab" class="tab-content active">
                <textarea id="text-input" placeholder="例如：一匹骏马、一把科幻手枪、一个复古茶杯..."></textarea>
                <button id="generate-from-text">生成3D模型</button>
            </div>

            <div id="image-tab" class="tab-content">
                <div class="upload-area" id="drop-zone">
                    <p>📁 拖拽图片到此处，或 <label for="file-input">点击上传</label></p>
                    <input type="file" id="file-input" accept="image/*">
                </div>
                <div id="image-preview"></div>
                <button id="generate-from-image" disabled>生成3D模型</button>
            </div>
        </div>

        <div class="result-section" id="result-section" style="display: none;">
            <h3>🎉 生成结果</h3>
            <div class="model-preview" id="model-container">
                <!-- Three.js 画布将在这里插入 -->
            </div>
            <div class="result-actions">
                <button id="download-btn">💾 下载模型 (.glb)</button>
                <div class="feedback">
                    <span>模型质量如何？</span>
                    <button id="feedback-good">👍 很好</button>
                    <button id="feedback-bad">👎 需改进</button>
                </div>
            </div>
        </div>

        <div class="loading" id="loading" style="display: none;">
            <p>🔄 AI正在生成3D模型...</p>
            <div class="spinner"></div>
            <div class="loading-details">
                <p>📊 状态: <span id="loading-status">初始化...</span></p>
                <p>⏱️ 预计时间: <span id="loading-time">10-30秒</span></p>
            </div>
        </div>

        <footer>
            <p>💡 提示: 此应用完全在本地运行，无需网络连接</p>
        </footer>
    </div>


    



    <script src="script.js"></script>
</body>
</html>